<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Text</title>
		<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
		<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
		<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
		<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
	</head>
	<body>
		<div style="width: 100%;margin:20px auto">
			<div id="summernote"></div>
		</div>
		<form id="ftn">
			{% csrf_token %}
			<div>
				<input type="text" id="title" name="title" placeholder="请输入帖子标题" />
				<div>
					<input class="summernote" id="summernote1" name="content">
				</div>
			</div>
			<button type="button" onclick="save()">提交</button>
		</form>
		<script>
			/**
			 * 编辑器新增的ajax上传图片函数
			 * @param files
			 * @param editor
			 * @param $editable
			 * @returns {boolean}
			 */
			function sendFile(files, editor, $editable) {
				var size = files[0].size;
				if ((size / 1024 / 1024) > 2) {
					alert("图片大小不能超过2M...");
					return false;
				}
				var formData = new FormData();
				formData.append("file", files[0]);
				console.log(formData);
				$.ajax({
					data: formData,
					type: "POST",
					url: "/instantuploa/", // 图片上传出来的url，返回的是图片上传后的路径，http格式
					cache: false,
					contentType: false,
					processData: false,
					dataType: "json",
					success: function(response) { //data是返回的hash,key之类的值，key是定义的文件名
						if (response['status'] == 1) {
							//将图片插入到编辑框内
							$('#summernote').summernote('insertImage', response.file, 'img');
							alert("上传成功");
						} else {
							alert('上传失败，请重新上传！');
							return false
						}
					},
					error: function() {
						alert("上传失败");
					}
				});
			}

			function save() {
				var tet = $('#summernote').summernote('code');
				var title = $('#title').val();
				var data = {
					content: tet,
					title: title,
				};
				console.log(data);
				$.ajax({
					// cache: true,
					type: 'post',
					url: '/text/',
					data: data,
					success: function(data) {
						//写上你的回调处理
						console.log('上传成功');
					}
				})
			}
		</script>

		<script>
			$(document).ready(function() {
				$('#summernote').summernote({
					height: '200px',
					placeholder: 'Hello hello hello ...',
					lang: 'zh-CN',
					callbacks: {
						onImageUpload: function(files, editor, $editable) {
							sendFile(files);
						}
					},
					toolbar: [
						['style', ['style']],
						['font', ['bold', 'italic', 'clear']],
						['fontname', ['fontname']],
						['fontsize', ['fontsize']],
						['color', ['color']],
						['para', ['ol', 'ul', 'paragraph', 'height']],
						['picture'],
						['table', ['table']],
						['insert', ['link']],
						['view', ['undo', 'redo', 'fullscreen', 'codeview', 'help']]
					]

				});
			});
		</script>
	</body>
</html>
